<script>
	import charging from "@/components/common/charging.vue"
	
export default {
	components: {
		charging
	},
	data() {
		return {
			item:{},
			chargingShow: false,
			status: 0,  //1预约 2已约 3进行中 4完成
			type: 0, //1 充电 2停车
			list: [],
			statusText: {
				1: "正常",
				2: "故障",
				3: "被占用 ",
				4: "停用",
			}
		}
	},
	onLoad: function (option) {
		this.status = option.status || 0
		this.type = option.type || 0
		this.getList()
	},
	methods: {
		async getList() {
			const res = await this.http("get", "/api/master/master_order", {
				status: this.status,
				type: this.type
			})
			this.list = res.data
		},
		async confirmCharge(id) {
			const res = await this.http("post", "/api/master/pass", {
				order_id: id
			})
			this.toast(res.message)
			this.getList()
		},
		lookat_comment(item){
			uni.navigateTo({
				url:'/pages/order/comment?item='+JSON.stringify(item)+"&is_adimn=1"
			})
		},
		chargingShow_action(item){
			this.item = item
			this.chargingShow=true
			
		}
	}
}
</script>
<template>
	<view>

		<charging v-if="chargingShow" :show.sync="chargingShow" :item="item" :type="1"/>
		
		<view class="my-content">
			
			<!-- <pre>
				{{ list }}
			</pre> -->
			<Nomore v-if="list.length == 0"></Nomore>

			<div v-if="type == 2">
				<view class="res-box" v-for="item in list" :key="item.id">
					<text class="res-time">预约时间:{{item.create_at}}</text>
					<view class="res-con">
						<view class="res-top">
							<text class="res-top-l">车位{{statusText[item.park.status]}}</text>
							<view class="res-top-c">
								<view class="res-img">
									<image :src="item.park.pic" mode="widthFix"></image>
								</view>
								<view class="res-text">
									<text class="res-title">{{item.park.name}}</text>
									<view class="res-flex">
										<text>编号:{{item.park.sn}}</text>
									</view>
									<text>营业时间:{{item.park.start_time}}-{{item.park.end_time}}</text>
									<view class="res-flex">
										<text>停车费:{{item.park.price}}元/小时</text>
										<text class="green" style="display: none;">可约停车位</text>
									</view>
								</view>
							</view>
						</view>
						<view class="res-c"  v-if="item.status==1||item.status==2">
							<text v-if="item.car">停车车辆：{{item.car.name}}</text>
							<text>车辆电话：{{item.car_tel}}</text>
						</view>
						
						<block v-if="item.status==2">
							<!-- 已约显示 -->
							<hr>
							<view class="res-end">放行时间:{{item.start_time}}</view>
						</block>
						
						<block v-if="item.status==3||item.status==4">
							<!-- 停车中显示 -->
							<hr>
							<view class="res-c">
								<text>开始时间：{{item.start_time}}</text>
								<text>已用时: {{item.use_time}}分钟</text>
								<view class="res-flex between">
									<text v-if="item.car">停车车辆：{{item.car.name}}</text>
								</view>
								<view class="res-flex between">
									<text>车辆电话：{{item.car_tel}}</text>
								</view>							
								<text>停车费：{{item.park_price}}元</text>
							</view>
						</block>

						
						<block v-if="item.status==5||item.status==6">
							<!-- 完成停车 -->
							<hr>
							<view class="res-c">
								<text>开始时间：{{item.start_time}}</text>
								<text>结束时间: {{item.end_time}}</text>
								<div class="between">
									<text>停车时长: {{item.use_time2}}分钟 </text>
									<view class="text-red">停车费: {{item.park_price}}元</view>
								</div>
								<view class="text-red">已支付: {{item.paid_price}}元</view>
							</view>
							<view class="res-end2" @click="lookat_comment(item)">查看评论</view>
						</block>

					</view>
				</view>


			</div>


			<!-- 上面是车位订单 -->

			<!-- 下面是充电订单 -->


			<div v-if="type == 1">
				<view class="res-box" v-for="item in list" :key="item.id">
					<text class="res-time">预约时间:{{ item.create_at }}</text>
					<view class="res-con" v-if="item.device">
						<view class="jiao">快</view>
						<view class="res-top">
							<text class="res-top-l"
								:class="{ 'bg-green': item.device.status == 1, 'bg-yellow': item.device.status == 2, 'bg-orange': item.device.status == 3, 'bg-red': item.device.status == 4 }">
								{{ statusText[item.device.status] }}
							</text>
							<view class="res-top-c">
								<view class="res-img">
									<image src="../../static/logo.png" mode="widthFix"></image>
								</view>
								<view class="res-text">
									<text class="res-title">{{ item.device.name }}</text>
									<view class="res-flex">
										<text>编号:{{ item.device.sn }}</text>
										<text>功率:{{ item.device.rate }}kw</text>
									</view>
									<text>营业时间:{{ item.device.start_time }}-{{ item.device.end_time }}</text>
									<view class="res-flex">
										<text>停车费:{{ item.park.price }}元/小时</text>
										<!-- <text class="green" style="display: none;">可约停车位</text> -->
									</view>
								</view>
							</view>
						</view>
						
						<view class="res-c"  v-if="item.status==1||item.status==2">
							<text v-if="item.car">充电车辆：{{ item.car.car_number }}</text>
							<text>车辆电话：{{ item.car_tel }}</text>
						</view>
						<block v-if="item.status==2">
							<!-- 已约显示 -->
							<hr>
							<view class="res-end">放行时间:{{item.start_time}}</view>
						</block>
						
						
						<block v-if="item.status==3||item.status==4">
							<!-- 充电中显示
							<hr> -->
							<view class="res-c">
								<text>充电开始时间：{{ item.charge_start_time||item.start_time }}</text>
								<view class="res-flex">
									<text v-if="item.car">充电车辆：{{ item.car.car_number }}</text>
									<text>车辆电话：{{ item.member.phone }}</text>
								</view>
								<text>停车费：{{ item.park_price }}元</text>
							</view>
							<div class="pt-20 pb-20">
								<view class="res-b flex center" @click="chargingShow_action(item)">
									<image src="../../static/my/icon7.png" class="w-40 h-40" mode="widthFix"></image>
									实时充电数据
								</view>
							</div>
						</block>

						<block v-if="item.status==5||item.status==6">
							<!-- 完成充电显示
							<hr> -->
							<view class="res-c">
								<text>充电开始时间：{{ item.charge_start_time||item.start_time }}</text>
								<template>
									<text>充电结束时间：{{ item.charge_end_time||item.end_time }}</text>
									<view class="between">
										<view style="width: 50%;font-size: 28rpx;">充电时长：{{ item.charging_duration }}分</view>
										<view style="width: 50%;font-size: 28rpx;" class="flex">平均时段：<text
												style="color: #FF0000;font-size: 28rpx;">{{ item.du||0 }}</text>元/度
										</view>
									</view>
									<view class="between">
										<view style="width: 50%;font-size: 28rpx;" v-if="item.car">充电车辆：{{ item.car.name }}</view>
										<view style="width: 50%;font-size: 28rpx;">充电量：{{ item.charging_capacity }}度</view>
									</view>
									<view class="between">
										<view style="width: 50%;font-size: 28rpx;">电费：{{ item.electric_price }}元</view>
										<view style="width: 50%;font-size: 28rpx;">服务费：{{ item.service_price }}元</view>
									</view>
									<view class="between">
										<view style="width: 50%;font-size: 28rpx;">停车费：{{ item.park_price }}元</view>
									</view>
								</template>
								<text style="color: #FF0000;font-size: 28rpx;">已支付：{{ item.paid_price }}元</text>
							</view>
							<view class="res-end2" @click="lookat_comment(item)">查看评论</view>
						</block>

					</view>
				</view>
			</div>
		</view>
	</view>

</template>



<style lang="less" scoped>
.my-content {
	width: 100%;
	padding: 30upx;
	box-sizing: border-box;

	.res-box {
		width: 100%;

		.res-time {
			font-size: 28upx;
			color: #A6A6A6;
			display: block;
			margin-bottom: 10upx;
		}

		.res-con {
			width: 100%;
			border-radius: 16upx;
			overflow: hidden;
			box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.3);
			margin-bottom: 20upx;
			position: relative;

			.jiao {
				position: absolute;
				top: 10upx;
				right: 10upx;
				width: 40upx;
				height: 40upx;
				border-radius: 8upx;
				background: #FA5151;
				color: #fff;
				font-size: 24upx;
				text-align: center;
				line-height: 40upx;
			}

			.res-top {
				width: 100%;
				display: flex;

				.res-top-l {
					width: 40upx;
					font-size: 24upx;
					color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
					text-align: center;
				}

				.res-top-c {
					display: flex;
					align-items: center;
					width: 90%;
					padding: 10upx;
					box-sizing: border-box;

					.res-img {
						width: 100upx;
						height: 100upx;
						border-radius: 50%;
						overflow: hidden;
						margin-right: 10upx;

						image {
							width: 100%;
							height: auto;
						}
					}

					.res-text {
						.res-flex {
							display: flex;

							text {
								min-width: 200upx;
								margin-right: 40upx;
							}
						}

						.res-title {
							font-size: 28upx;
							color: #000;
						}

						.green {
							color: #00B578;
						}

						text {
							display: block;
							font-size: 24upx;
							color: #9E9E9E;
						}
					}
				}
			}

			.res-c {
				width: 100%;
				padding: 10upx 20upx;
				box-sizing: border-box;
				border-top: 1px solid #D8D8D8;
				border-bottom: 1px solid #D8D8D8;
				line-height: 45rpx;

				text {
					display: block;
					font-size: 28upx;
					color: #000;
					margin-bottom: 5upx;
				}
			}

			.res-b {
				font-size: 36upx;
				color: #3662EC;
				font-weight: 600;
				padding: 10upx 0;
				text-align: center;
			}

			.res-end {
				font-size: 28upx;
				color: #A6A6A6;
				text-align: center;
				padding: 10upx 0;
			}
		}
	}
}

.res-end2 {
	font-size: 36upx;
	color: #3662EC;
	font-weight: 600;
	text-align: center;
	padding: 10upx 0;
}
</style>